<template>

<!--  <div style="">-->
<!--    <van-nav-bar title="充电中" left-text="返回" left-arrow @click-left="onClickLeft" />-->
<!--  </div>-->

<!--  <div style="margin-top: 40px;text-align: center;">-->
<!--    <van-circle v-model:current-rate="currentRate" :rate=chargingRate :speed="100" :text="text"></van-circle>-->
<!--  </div>-->
  <div style="margin-top: 80px;text-align: center;">
    <van-loading type="spinner" color="#1989fa" size="88px" vertical>充电中...</van-loading>
  </div>

  <div style="margin-left: 100px;margin-top: 50px;">
    <div>当前充电桩号：{{ reqMsg.gunNo }}</div>

    <div style="margin-top: 10px;">已充电量：<span style="color: #1989fa">{{ currentRate }}</span> kw</div>
  </div>

  <div class="foot-div">
    <span><van-button round type="success" size="normal" @click="stopCharging()">结束充电</van-button></span>
  </div>



</template>
<script setup>
import { onUnmounted, ref} from 'vue'
import router from '@/router'
import { useRoute } from 'vue-router';
import {CurrentChargingRate, StartCharging} from "@/api/station";

const route = useRoute();
// const onClickLeft = () => history.back();
const reqMsg = ref({
  gunNo: ''
});

const currentRate = ref(0);

initData();

function initData() {
  reqMsg.value.gunNo = route.query.gunNo;
  StartCharging(reqMsg.value).then(res => {
    if (res.data.code === 200000) {
      console.log('开始充电成功')
      startInterval();
    }else {
      console.log(res.data.message)
    }
  }).catch(() => {
    console.log('请求失败')
  })
}
let intervalId = null;

function startInterval() {
  // 组件挂载后立即获取一次数据
  fetchData();

  // 设置定时器，每5秒更新一次（可根据需求调整）
  intervalId = setInterval(fetchData, 5000);
}

function fetchData() {
  // 模拟获取数据
  CurrentChargingRate().then(res => {
    if (res.data.code === 200000) {
      currentRate.value = res.data.data;
    } else {
      console.log(res.data.message)
    }
  }).catch(() => {
    console.log('请求失败')
  })
}
onUnmounted(() => {
  // 组件卸载前清除定时器
  if (intervalId) {
    clearInterval(intervalId);
  }
});

function stopCharging() {
  router.push('/charging/finish')
}
</script>
<style>
.main-div {
  margin: 8px;
  height: 65px;
  width: auto;
  display: flex;
  border-radius: 2%;
  background-color: gray;
}

image {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
}

.foot-div {
  margin-top: 30px;
  text-align: center;
}
</style>